$(function() {

    // 图片
    var img_data = [];
    // 多图片查看记录上一页最后的图片
    var num = 0;
    //页数
    var pagination = 0;
    //下一页url
    var next_url = '';
    // 上一页url
    var prev_url = '';
    //是否显示提示信息
    var is_show_modal = true;
    // 判断是下一页还是返回上一页
    var mark = false;
    // 判断是否是多图查看
    var off = true;

    // 从url中获取参数
    var url_params = getUrlParam("table_name");
    var model = url_params.model || "apppages";
    var column = url_params.column || "ui";
    var id = url_params.id || 1;
    var url = URL + model + "/" + column + "?id=" + id

    function init(url) {
        $.ajax({
            url: url,
            dataType: 'json',
            async: false,
            success: function(data) {
                if (data.status == "200") {
                    next_url = data.data.page.nextpage.href;
                    prev_url = data.data.page.prepage.href;
                    img_data = data.data.data;
                    if (mark) {
                        pagination = off ? img_data.length - 1 : num;
                    } else {
                        pagination = 0;
                    }
                    if (off) {
                        addImage(data.data.data);
                    } else {
                        imgGrid();
                    }
                    $('.pages').children().html(data.data.page.nowpage + '/' + data.data.page.totalpage);
                } else {
                    showModal("暂无数据");
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                //console.log("get data fail" + XMLHttpRequest.status + "  " + XMLHttpRequest.readyState + "     " + textStatus);
                showModal("请求错误");
            },
            complete: function(data, textStatus) {
                //console.log("完成ajax");
            }
        });
    }


    addClick();

    function addImage(data) {
        $('#title').html(data[pagination].title);
        $('.interior').empty();
        var item = '';
        for (var i = 0; i < data.length; i++) {
            item += "<img id='" + data[i].title + "' class= 'artZoom__" + i + " img-responsive center-block' src=" + data[i].href + ">"
        };
        $('.interior').append(item);
        $('.artZoom__' + pagination).show();
        //图片缩放
        for (var i = 0; i < data.length; i++) {
            var _class = '.artZoom__' + i
            $(_class).artZoom({
                path: '../../images', // 设置artZoom图片文件夹路径
                preload: true, // 设置是否提前缓存视野内的大图片
                blur: true, // 设置加载大图是否有模糊变清晰的效果
                several: i,
                // 语言设置
                left: '左旋转', // 左旋转按钮文字
                right: '右旋转', // 右旋转按钮文字
                zoomMax: '放大',
                zoomMin: '缩小',
                source: '看原图' // 查看原图按钮文字
            });
        }
        $('.several_' + pagination).show().siblings('div').hide();
    }

    function addClick() {
        $('.button-next').click(function() {
            if (pagination == img_data.length - 1 && off) {
                if (next_url) {
                    mark = false;
                    init(next_url);
                } else {
                    if (is_show_modal) {
                        showModal("已是最后一页");
                    }
                }
            } else if (off) {
                carousel("right");
                $('#title').html(img_data[pagination].title);
            } else {
                if (pagination < img_data.length - 4) {
                    imgSwitchover("right");
                } else {
                    if (next_url) {
                        mark = false;
                        num = img_data.length - img_data.length % 4;
                        init(next_url);
                    } else {
                        showModal("已是最后一页");
                    }
                }
            }
        });

        $('.button-prev').click(function() {
            if (pagination == 0 && off) {
                if (prev_url) {
                    mark = true;
                    init(prev_url);
                } else {
                    if (is_show_modal) {
                        showModal("已是第一页");
                    }
                }
            } else if (off) {
                carousel("left");
                $('#title').html(img_data[pagination].title);
            } else {
                if (pagination < 1) {
                    if (prev_url) {
                        mark = true;
                        num = img_data.length - img_data.length % 4;
                        init(prev_url);
                    } else {
                        showModal("已是第一页");
                    }
                } else {
                    imgSwitchover("left");
                }
            }
        });

        //是否自动轮播
        var timing;
        $('#self-motion').click(function() {
            if (this.checked) {
                timing = setInterval(function() {
                    if (pagination == img_data.length - 1 && off) {
                        if (next_url) {
                            mark = false;
                            init(next_url);
                        } else {
                            if (is_show_modal) {
                                showModal("已是最后一页");
                            }
                        }
                    } else if (off) {
                        carousel("right");
                        $('#title').html(img_data[pagination].title);
                    } else {
                        if (pagination < img_data.length - 4) {
                            imgSwitchover("right");
                        } else {
                            if (next_url) {
                                mark = false;
                                num = img_data.length - img_data.length % 4;
                                init(next_url);
                            } else {
                                clearInterval(timing);
                                $('#self-motion').prop("checked", false);
                                showModal("已是最后一页");
                            }
                        }
                    }
                }, 2000);
            } else {
                clearInterval(timing);
            }
        });

        //按键盘
        $(this).keydown(function(event) {
            switch (event.keyCode) {
                case 39:
                    if (pagination == img_data.length - 1 && off) {
                        if (next_url) {
                            mark = false;
                            init(next_url);
                        } else {
                            if (is_show_modal) {
                                showModal("已是最后一页");
                            }
                        }
                    } else if (off) {
                        carousel("right");
                        $('#title').html(img_data[pagination].title);
                    } else {
                        if (pagination < img_data.length - 4) {
                            imgSwitchover("right");
                        } else {
                            if (next_url) {
                                mark = false;
                                num = img_data.length - img_data.length % 4;
                                init(next_url);
                            } else {
                                showModal("已是最后一页");
                            }
                        }
                    }
                    break;
                case 37:
                    if (pagination == 0 && off) {
                        if (prev_url) {
                            mark = true;
                            init(prev_url);
                        } else {
                            if (is_show_modal) {
                                showModal("已是第一页");
                            }
                        }
                    } else if (off) {
                        carousel("left");
                        $('#title').html(img_data[pagination].title);
                    } else {
                        if (pagination < 1) {
                            if (prev_url) {
                                mark = true;
                                init(prev_url);
                                num = img_data.length - img_data.length % 4;
                            } else {
                                showModal("已是第一页");
                            }
                        } else {
                            imgSwitchover("left");
                        }
                    }
                    break;
                case 33:
                case 38:
                    if (prev_url) {
                        pagination = 0;
                        mark = false;
                        init(prev_url);
                    } else {
                        if (is_show_modal) {
                            showModal("已是第一页");
                        }
                    }
                    break;
                case 34:
                case 40:
                    if (next_url) {
                        pagination = 0;
                        mark = false;
                        init(next_url);
                    } else {
                        if (is_show_modal) {
                            showModal("已是最后一页");
                        }
                    }
                    break;
                case 96:
                    if ($('#imgs').prop("checked")) {
                        off = true;
                        pagination = pagination < 0 ? 0 : pagination;
                        carousel();
                        addImage(img_data)
                        $('.several_' + pagination).show().siblings('div').hide();
                        $('#title').html(img_data[pagination].title);
                        $('.title').show();
                        $('.img-content').hide();
                        $('.interior').show();
                        $('.content').show();
                        $('#imgs').prop("checked", false);
                    } else {
                        off = false;
                        $('.content').hide();
                        $('.img-content').show();
                        $('.title').hide();
                        imgGrid();
                        $('#imgs').prop("checked", true);
                    }
                    break;
            }
        });

        $('#imgs').click(function() {
            if (this.checked) {
                off = false;
                $('.content').hide();
                $('.img-content').show();
                $('.title').hide();
                imgGrid();
            } else {
                off = true;
                pagination = pagination < 0 ? 0 : pagination;
                carousel();
                addImage(img_data);
                $('.several_' + pagination).show().siblings('div').hide();
                $('#title').html(img_data[pagination].title);
                $('.title').show();
                $('.img-content').hide();
                $('.interior').show();
                $('.content').show();
            }
        });

        $('.button-nexts').click(function() {
            if (pagination == img_data.length - 1 && off) {
                if (next_url) {
                    mark = false;
                    init(next_url);
                } else {
                    if (is_show_modal) {
                        showModal("已是最后一页");
                    }
                }
            } else if (off) {
                carousel("right");
                $('#title').html(img_data[pagination].title);
            } else {
                if (pagination < img_data.length - 4) {
                    imgSwitchover("right");
                } else {
                    if (next_url) {
                        mark = false;
                        num = img_data.length - img_data.length % 4;
                        init(next_url);
                    } else {
                        showModal("已是最后一页");
                    }
                }
            }
        })

        $('.button-prevs').click(function() {
            if (pagination == 0 && off) {
                if (prev_url) {
                    mark = true;
                    init(prev_url);
                } else {
                    if (is_show_modal) {
                        showModal("已是第一页");
                    }
                }
            } else if (off) {
                carousel("left");
                $('#title').html(img_data[pagination].title);
            } else {
                if (pagination < 1) {
                    if (prev_url) {
                        mark = true;
                        num = img_data.length - img_data.length % 4;
                        init(prev_url);
                    } else {
                        showModal("已是第一页");
                    }
                } else {
                    imgSwitchover("left");
                }
            }
        })
    }

    function imgGrid() {
        $('.img-box').empty();
        var item = '';
        for (var i = 0; i < img_data.length; i++) {
            item += "<div class='col-md-6 col-sm-6 col-xs-6'>"
            item += "<p class='col-md-12 col-sm-12 col-xs-12'>" + img_data[i].title + "</p><img id='" + img_data[i].title;
            item += "' class= 'artZoom_" + i + " img-responsive center-block' src=";
            item += img_data[i].href + "></div>";
        }
        $('.img-box').append(item);
        $('.img-content').show();
        imgSwitchover();
    }

    // 多图切换处理
    function imgSwitchover(page) {
        var count = 0;
        if (page == "right") {
            pagination += 4;
        } else if (page == "left") {
            pagination -= 4;
        } else {

        }
        for (var i = 0; i < img_data.length; i++) {
            if (i >= pagination && count < 4) {
                $('#' + img_data[i].title).parent().show();
                count++;
            } else {
                $('#' + img_data[i].title).parent().hide();
            }
        }
    }

    // 翻页处理
    function carousel(page) {
        // debugger
        if (page == "right") {
            pagination++;
        } else if (page == "left") {
            pagination--;
        } else {

        }
        pagination = pagination % img_data.length;
        var multi = $('#imgCanvas_' + pagination).attr('class');
        if (multi) {
            if (multi.indexOf('artZoom__' + pagination) != -1) {
                $('#imgCanvas_' + pagination).show().siblings('canvas').hide();
                $('.artZoom__' + pagination).siblings('img').hide();
                $('.several_' + pagination).show().siblings('div').hide();
            }
        } else {
            $('.artZoom__' + pagination).show().siblings('img').hide();
            $('.several_' + pagination).show().siblings('div').hide();
            $('.ui-artZoom').siblings('canvas').hide();
        }
    }

    // 模态框提示
    function showModal(describe) {
        $(".modal-content").html(describe);
        $('.modal').modal({
            keyboard: true
        })
        is_show_modal = false;
        setTimeout(function() {
            $('.modal').modal('toggle');
            $('.modal-backdrop').remove();
            is_show_modal = true;
        }, 1000);
    }

    //初始化
    init(url);
})
